<template>
    <div id="List">
        <div class="cover">
         <div class="header">
            <div class="ret" @click="goBack()"></div>
            <img class="header-left" src="../../assets/zfc-img/左箭头.png" alt="左箭头">
            <span>必买清单</span>
            <img class="header-right" src="../../assets/img/更多.png" alt="更多" @click="change()">
        </div>
         <router-link to="/Mustlist" class="box">
                <div class="boxContent">
                    奶粉也要玩有机，养成健康北鼻
                </div>
                <div class="boxCont">
                <img src="../../assets/img/妈咪宝贝.png" alt="妈咪宝贝">
                </div>
                <div class="boxCt">
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">诺优能幼儿配方奶粉</p>
                    <p class="box-cont">￥59</p>
                </div>
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">诺优能幼儿配方奶粉</p>
                    <p class="box-cont">￥129</p>
                </div>
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">诺优能幼儿配方奶粉</p>
                    <p class="box-cont">￥88</p>
                </div>
                </div>
        </router-link>
        <div class="blank"></div>
        <router-link to="/Mustlist" class="box">
                <div class="boxContent">
                    奶粉也要玩有机，养成健康北鼻
                </div>
                <div class="boxCont">
                <img src="../../assets/img/妈咪宝贝.png" alt="妈咪宝贝">
                </div>
                <div class="boxCt">
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">诺优能幼儿配方奶粉</p>
                    <p class="box-cont">￥59</p>
                </div>
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">诺优能幼儿配方奶粉</p>
                    <p class="box-cont">￥129</p>
                </div>
                <div class="boxCon">
                    <img src="../../assets/img/奶粉.png" alt="奶粉">
                    <p class="box-con">诺优能幼儿配方奶粉</p>
                    <p class="box-cont">￥88</p>
                </div>
                </div>
        </router-link>
        <!-- 返回顶部 -->
        <div class="return" v-if="btnFlag" @click="backTop">
            <img  class="go-top" src="../../assets/img/返回顶部.png" >
        </div>
        <!-- 消息中心 -->
        <div class="center" :class="{'no':flag}">
            <ul class="centerContent">
                <li class="lie" v-for="(item,index) in arr " v-bind:key="index" >
                    <img class="Icon" :src="item.urlimg" alt="图标">
                    <span class="show">{{item.text}}</span>
                </li>
            </ul>
        </div>
        <div class="triangle" :class="{'no':flag}"></div>
        <div class="bottom"></div>
        </div>
    </div>
</template>
<script>
export default {
    name:'List',
    data() {
        return {
            btnFlag:false,
            flag:true,
            arr:[
                {
                    urlimg:require("../../assets/imgs/消息中心.png"),
                    text:'消息',
                },
                 {
                    urlimg:require("../../assets/imgs/首页1.png"),
                    text:'首页',
                },
                 {
                    urlimg:require("../../assets/imgs/分享.png"),
                    text:'分享',
                },
                 {
                    urlimg:require("../../assets/imgs/个人中心1.png"),
                    text:'个人中心',
                },
            ]
        }
    },
    methods: {
        // 返回上一页
        goBack(){
            window.history.back()
        },
         // 点击图片回到顶部方法，加计时器是为了过渡顺滑
        backTop () {
            let timer = setInterval(() => {
                let ispeed = Math.floor(-this.scrollTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop + ispeed
                if (this.scrollTop === 0) {
                clearInterval(timer)
                }
            }, 16)
         },
         // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
        scrollToTop () {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            this.scrollTop = scrollTop
            if (this.scrollTop > 60) {
            this.btnFlag = true
            } else {
            this.btnFlag = false
            }
        },
        // 点击消息中心显示与隐藏
        change(){
            this.flag = !this.flag
        }
    },   
        // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
        mounted () {
        window.addEventListener('scroll', this.scrollToTop)
        },
        destroyed () {
        window.removeEventListener('scroll', this.scrollToTop)
        },
}
</script>
<style scoped>
.cover{
    width: 100%;
    background-color: #fff;
    position: absolute;
    z-index: 111;
}
.header{
      width: 100%;
      height: 0.96rem;
      line-height: 0.96rem;
      background-color: #e53e42;
      font-size: 0.36rem;
      color: #fff;
      position: relative;
  }
  .ret{
    width: 0.25rem;
    height: 0.4rem;
    position: absolute;
    left: 0.2rem;
    top: 0.35rem;
    z-index: 100;
}
  .header-left{
      width: 0.22rem;
      height: 0.38rem;
      position: absolute;
      left: 0.2rem;
      top: 0.3rem;
  }
  .header>span{
      margin-left: 2.7rem;
  }
  .header-right{
      width: 0.35rem;
      height: 0.1rem;
      position: absolute;
      left: 6.3rem;
      top: 0.4rem;
  }
   /* 奶粉专区 */
  .box{
  display: block;
    width: 100%;
    height: 7.4rem;
    position: relative;
}
.boxContent{
    width: 100%;
    height: 0.8rem;
    position: absolute;
    top: 1.7rem;
    left: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 0.3rem;
    line-height: 0.8rem;
    text-align: center;
}
.boxCont{
    width: 100%;
    height: 4rem;
    text-align: center;
}
.boxCont>img{
    width: 100%;
    height: 4rem;
    border: solid 1px #ccc;
}
.boxCt{
  width: 100%;
  height: 1.9rem;
  display: flex;
  justify-content: space-evenly;
}
.boxCon{
  width: 2.2rem;
  height: 3.45rem;
  text-align: center;
}
.boxCon>img{
  width: 2.2rem;
  height: 1.9rem;
  margin-top: 0.15rem;
  border: solid 0.01rem #f2f2f2;
  
}
.box-con{
  font-size: 0.24rem;
  margin: 0.08rem 0;
  color:#000;
}
.box-cont{
  font-size: 0.24rem;
  color: #e83d41;
} 
/* 第二板块 */
.blank{
    width: 100%;
    height: 0.2rem;
    background-color: #f2f2f2;
}
.bottom{
    width: 100%;
    height: 2.3rem;
    background-color: #f2f2f2;
}
/* 返回顶部 */
.return{
    width: 0.5rem;
    height: 0.5rem;
    position: fixed;
    left: 6.2rem;
    top: 10.8rem;
    background-color: #fff;
    border-radius: 0.25rem;
    border: solid 1px #ccc;
}
.return img{
    margin-bottom: 0.58rem;
}
/* 消息中心 */
.no{
    display: none;
}
.triangle{
    width: 0;
    height: 0;
    border-top: 0.25rem solid transparent;
    border-right:0.25rem solid transparent;
    border-bottom:0.25rem solid #fff;
    border-left:0.25rem solid transparent;
    position: absolute;
    left: 6.1rem;
    top: 0.5rem;
}
.center{
    width: 1.7rem;
    height: 2.8rem;
    position: absolute;
    left: 5.2rem;
    top: 1rem;
    background-color: #fff;
     border-radius: 0.2rem;
}
.centerContent{
    width: 1.7rem;
    height: 2.8rem;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    font-size: 0;
   
}
.lie{
    width: 1.3rem;
    height: 0.4rem;
    margin-top: 0.2rem;
}
.Icon{
    width: 0.3rem;
    height: 0.3rem;
}
.show{
    width: 1rem;
    height: 0.2rem;
    font-size: 0.24rem;
    color: #4d4d4d;
    margin-left: 0.04rem;
    vertical-align: top;

}
</style>